<template>
  <view class="broken-history">
    <!-- 历史记录列表 -->
    <view class="history-list">
      <view class="history-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
        <view class="info-row">
          <view class="label">柜机序列号</view>
          <view class="value">{{ machineInfo?.serialNumber || '-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">状态</view>
          <view class="value">{{ item.status == 0 ? '未处理' : '已处理' }}</view>
        </view>
        <view class="info-row">
          <view class="label">提交时间</view>
          <view class="value">{{ item.submitTime || '2023-06-07' }}</view>
        </view>
        <view class="info-row">
          <view class="label">问题描述</view>
          <view class="value">{{ item.faultDescribe || '-' }}</view>
        </view>
        <view class="info-row">
          <view class="label">工程师反馈</view>
          <view class="value">{{ item.feedback || '-' }}</view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!dataList?.length">
      <image src="/static/images/empty-list.png" mode="aspectFit" />
      <text>暂无历史记录</text>
    </view>

    <!-- 加载更多 -->
    <uv-load-more :status="status" line v-if="dataList.length!=0" height="60" />
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { getbrokenList } from '@/api/broken'
  import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'

  // 历史记录数据
  const dataList = ref([])
  const machineInfo = ref({})
  const status = ref('loadmore')
  const total = ref(0)
  const query = ref({
    pageNum: 1,
    pageSize: 10,
    cabinetId: ""
  })

  // 获取故障记录
  const getList = () => {
    status.value = 'loading'
    getbrokenList(query.value).then(res => {
      if (res.code == 200 && res.rows) {
        dataList.value = query.value.pageNum === 1 ? res.rows : dataList.value.concat(res.rows)
        total.value = res.total || 0
        machineInfo.value = uni.getStorageSync('machineInfo') || {}
      }
    }).finally(() => {
      status.value = dataList.value.length >= total.value ? 'nomore' : 'loadmore'
      uni.stopPullDownRefresh()
    })
  }

  // 返回上一页
  const goBack = () => {
    uni.navigateBack()
  }

  // 跳转详情页
  const toDetail = (item) => {
    if (item?.id) {
      uni.navigateTo({
        url: '/pages/broken/detail?id=' + item.id
      })
    }
  }

  // 页面加载
  onShow(() => {
    query.value.cabinetId = uni.getStorageSync('machineInfo').id || ''
    getList()
  })

  onPullDownRefresh(() => {
    query.value.pageNum = 1
    getList()
  })

  // 上拉加载
  onReachBottom(() => {
    if (dataList.value.length < total.value) {
      query.value.pageNum++
      getList()
    }
  })

</script>

<style lang="scss" scoped>
  .broken-history {
    min-height: 100vh;
    background: #f5f5f5;

    .history-list {
      padding: 26rpx;
      padding-bottom: 0;

      .history-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 26rpx;

        .info-row {
          display: flex;
          margin-bottom: 20rpx;
          align-items: flex-start;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            width: 180rpx;
            font-size: 28rpx;
            color: #6B7280;
            flex-shrink: 0;
          }

          .value {
            flex: 1;
            font-size: 24rpx;
            color: #666;
            margin-top: 8rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
          }
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 200rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }

      text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
</style>